<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../lib/echarts.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>

<body>
    
    <div style="text-align: left;">
    <div id="main" style="width: 500px; height:300px"></div>

    <script>
        
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main'));

        $.ajax({
            "url": "http://localhost:8080/good/echartBar",
            "data": {},
            "success": function (result) {
                var typeList=[];
                var typeCount=[];

                var arr = result.data.typeBar;
                for(var i=0;i<arr.length;i++){
                    typeList.push(arr[i].type);
                    typeCount.push(arr[i].count)
                }    

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '商品类型柱状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['商品类型']
                    },
                    xAxis: {
                        data: typeList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '商品类型',
                            type: 'bar',
                            data: typeCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
                window.addEventListener("resize",function(){
        graph.resize();
    });

            }
        })





    </script>
    </div>

    <div style="text-align: center;">
    <div id="main2" style="width: 500px; height:300px"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));



        $.ajax({
            "url": "http://localhost:8080/error/echartBar",
            "data": {},
            "success": function (result) {
                var levelList=[];
                var levelCount=[];

                var arr = result.data.levelBar;
                for(var i=0;i<arr.length;i++){
                    levelList.push(arr[i].level);
                    levelCount.push(arr[i].count)
                }    

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '失误级别柱状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['失误级别']
                    },
                    xAxis: {
                        data: levelList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '失误级别',
                            type: 'bar',
                            data: levelCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize",function(){
        graph.resize();
    });

            }
        })

    </script>
    </div>
    
    <div style="text-align: right;">
    <div id="main3" style="width: 500px; height:300px"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('main3'));

        $.ajax({
            "url": "http://localhost:8080/Member/MemberBar",
            "data": {},
            "success": function (result) {
                var sexList=[];
                var sexCount=[];

                var arr = result.data.listBar;
                for(var i=0;i<arr.length;i++){
                    sexList.push(arr[i].name);
                    sexCount.push(arr[i].value)
                }    


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '会员比例图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['会员等级']
                    },
                    xAxis: {
                        data: sexList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '会员等级',
                            type: 'bar',
                            data: sexCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(option);
                window.addEventListener("resize",function(){
        graph.resize();
    });
            }
        })

    </script>
    </div>


    <div>
    <div id="main4" style="width: 500px; height:300px"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('main4'));



        $.ajax({
            "url": "http://localhost:8080/grade/columnarVo",
            "data": {},
            "success": function (result) {
                var ageList=[];
                var ageCount=[];

                var arr = result.data.ageBar;
                for(var i=0;i<arr.length;i++){
                    ageList.push(arr[i].name);
                    ageCount.push(arr[i].value)
                }    


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '合作商等级柱状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['等级']
                    },
                    xAxis: {
                        data: ageList
                    },
                    yAxis: {},
                    series: [
                        {
                           classa : '等级',
                            type: 'bar',
                            data: ageCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart4.setOption(option);

            }
        })
    </script>
    </div>


    <div>
    <div id="main5" style="width: 500px; height:300px"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart5 = echarts.init(document.getElementById('main5'));



        $.ajax({
            "url": "http://localhost:8080/storage/echartBar",
            "data": {},
            "success": function (result) {
                var nameList=[];
                var stockCount=[];

                var arr = result.data.nameBar;
                for(var i=0;i<arr.length;i++){
                    nameList.push(arr[i].name);
                    stockCount.push(arr[i].stock)
                }    


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '商品库存统计柱状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存']
                    },
                    xAxis: {
                        data: nameList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '库存',
                            type: 'bar',
                            data: stockCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart5.setOption(option);


            }
        })

    </script>
    </div>

    <div>
    <div id="main6" style="width: 500px; height:300px"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart6 = echarts.init(document.getElementById('main6'));



        $.ajax({
            "url": "http://localhost:8080/storage/echartBar",
            "data": {},
            "success": function (result) {
                var nameList=[];
                var stockCount=[];

                var arr = result.data.nameBar;
                for(var i=0;i<arr.length;i++){
                    nameList.push(arr[i].name);
                    stockCount.push(arr[i].stock)
                }    


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '商品库存统计柱状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存']
                    },
                    xAxis: {
                        data: nameList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '库存',
                            type: 'bar',
                            data: stockCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart6.setOption(option);


            }
        })

    </script>
</div>


<div>
<div id="main7" style="width: 500px; height:300px"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart7 = echarts.init(document.getElementById('main7'));



        $.ajax({
            "url": "http://localhost:8080/user/echartBar",
            "data": {},
            "success": function (result) {
                var sexList=[];
                var sexCount=[];

                var arr = result.data.sexBar;
                for(var i=0;i<arr.length;i++){
                    sexList.push(arr[i].sex);
                    sexCount.push(arr[i].count)
                }    


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '员工男女人数比例柱状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['性别']
                    },
                    xAxis: {
                        data: sexList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '性别',
                            type: 'bar',
                            data: sexCount
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart7.setOption(option);


            }
        })





    </script>
</div>

</body>




</html>